<%--
  Created by IntelliJ IDEA.
  User: Hallock
  Date: 2019/9/17
  Time: 17:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../css/login.css"/>
    <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript">
        function checkUserName() {
            //1. 获取输入框的内容
            var name = $("#name").val();
            //alert(name);
            //2. 发送请求
            $.post("../checkUserServlet", {name: name}, function (data, status) {
                //alert(data);
                if (data == 1) {//用户名存在
                    //alert("用户名存在");
                    $("#span01").html("<font color='red'>用户名已被注册</font>");
                } else {
                    //alert("用户名可用");
                    $("#span01").html("<font color='green'>用户名可以使用</font>");
                }
            });
            if (name.length == 0) {
                $("#span01").html("<font color='red'>用户名为空</font>");
            }
            //3. 输出响应的数据到页面上。
        }

        function checkPassWrod() {
            var passwrod = $("#password").val();
            var pwd = $("#pwd").val()
            if (passwrod != pwd) {
                $("#span02").html("<font color='red'>密码不一致,请重新输入</font>");
            }
        }

        function passwordLength() {
            var passwrod = $("#password").val();
            if (passwrod.length < 8) {
                $("#span03").html("<font color='red'>密码长度不少于8个字符</font>")
            }
        }
    </script>

</head>
<body id="body">
<form action="../RegisterServlet" method="post">
    <center>
        <h1 id="h1_name">文章管理系统</h1>
        <div id="div01">
            <div id="font">
                <span>注册</span>
                <samp><a href="login.jsp">登录</a></samp><br/>
            </div>
            <input type="text" id="name" name="name" onblur="checkUserName()" placeholder="用户名/邮箱"/><span
                id="span01"></span><br/>
            <input type="password" id="password" name="password" onblur="passwordLength()" placeholder="密码"/><span
                id="span03"></span><br/>
            <input type="password" id="pwd" name="pwd" onblur="checkPassWrod()" placeholder="再次输入密码"/><span
                id="span02"></span><br/>
            <input type="text" placeholder="验证码" id="code_input"/><span id="span1"></span><br/>
            <div id="v_container" style="width: 150px;height: 40px;"></div>
            <script type="text/javascript" src="../js/gVerify.js"></script>
            <script type="text/javascript" src="../js/jquery.min.js"></script>
            <script>
                var verifyCode = new GVerify("v_container");
                document.getElementById("code_input").onblur = function () {
                    var res = verifyCode.validate(document.getElementById("code_input").value);
                    if (res) {
                        //  alert("验证正确");
                        $("#span1").html("<font color='green'>验证码正确</font>")
                        $("#submit1").removeAttr("disabled")
                    } else {
                        //  alert("验证码错误");
                        $("#span1").html("<font color='red'>验证码错误</font>")
                        //$("#submi").setAttribute("disabled","true")
                    }
                }

            </script>

            <input type="submit" value="注册" id="submit1" disabled class="btn btn-info"/><br/>
        </div>
    </center>
</form>
</body>
</html>